<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>2 column CSS</title>
	<link rel="stylesheet" href="2col.css" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
    html {
    	margin: 0;
    	padding: 0;
    	background-color: #fff;
    	color: #333;
    	height: 100%;
    	}

    body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      position: relative;
    }
  
    html, body {
      width: 100%;
      overflow: hidden;
    }

    div.uiFiveLayoutContainer {
      height: 100%;
    }
    
    div.uiHorBar {
      width: 100%;
      height: 5px;
      position: absolute;
      overflow: hidden;
      background-color: #ccc;
    }
    
    div.uiTopBar {
      top: 100px;
    }
    
    div.uiBottomBar {
      bottom: 100px;
    }

    div.uiLayoutContainer {
      position: absolute;
      top: 105px;
      bottom: 105px;
      width: 100%;
    }
    
    div.uiNorth {
      top: 0;
      height: 100px;
    }
    
    div.uiSouth {
      bottom: 0;
      height: 100px;
    }    
    
    div.uiElement {
      position: absolute;
      height: 100%;
      overflow: auto;
    }
    
    div.uiVertElement {
      position: absolute;
      width: 100%;
      overflow: auto;
    }
    
    div.uiLeftNav {
      left: 0;
      width: 200px;

      top: 50px;
      bottom: 0;
      height: auto;
    }
    
    div.uiToolbar {
      width: 190px;
      height: 40px;
      overflow: hidden;
      position: absolute;
      top: 0;
      padding: 5px;
      background-color: #66f;
    }
    
    div.uiLeftNavToolbar {
      left: 0;
    }

    div.uiRightNavToolbar {
      right: 0;
      top: auto;
      bottom: 0;
    }
    
    div.uiLeftBar {
      left: 200px;
    }

    /* The 5px on vertBar and 205px on uiContents need to be changed in tandem */

    div.uiVertBar {
      position: absolute;
      height: 100%;
      background-color: #ccc;
      width: 5px;
      cursor: col-resize;
    }
    
    div.uiContents {
      left: 205px;
      right: 205px;
      min-width: 0;
    }
    
    div.uiContentsDouble {
      left: 205px;
      right: 0;
      min-width: 0;
    }
    
    div.uiRightBar {
      right: 200px;
    }
    
    div.uiRightNav {
      right: 0;
      width: 200px;
      top: 0;
      bottom: 50px;
      height: auto;
    }
    
    div.uiInnerContent {
      margin: 5px;
    }
    
    div#wrap {
      position: relative;
      width: 100%;
    }
      
  </style>
  <!--[if lt IE 7]>
  <style>
    div.uiRightNav {
      height: expression(this.parentNode.clientHeight - 52 + "px");      
    }
    
    div.uiLeftNav {
      height: expression(this.parentNode.clientHeight - 50 + "px");
    }
    
    div.uiLayoutContainer {
      height: expression((this.parentNode.clientHeight - 210) + "px");
    }
  </style>
  <![endif]-->
  <script type="text/javascript" src="../../../jquery/src/core.js"></script>
  <script type="text/javascript" src="../../../jquery/src/selector.js"></script>
  <script type="text/javascript" src="../../../jquery/src/event.js"></script>
  <script type="text/javascript" src="../../../jquery/src/ajax.js"></script>
  <script type="text/javascript" src="../../../jquery/src/fx.js"></script>
  <script src="../../dimensions/jquery.dimensions.pack.js"></script>
  <script src="../ui.mouse.js"></script> 
  <script src="../ui.draggable.js"></script>
  <script src="../ui.draggable.ext.js"></script>  
<script>
jQuery(function($) {
	

	$("div.uiLeftBar").each(function() {
		this.ui = this.ui || {};
		this.ui.navSide = "Left";
	});
	
	$("div.uiRightBar").each(function() {
		this.ui = this.ui || {};
		this.ui.navSide = "Right";
	});










	//THE COOL STUFF STARTS HERE!
	$.fn.makePanes = function(o) {
		new $.ui.pane(this, o); //create a new instance of 'pane'
		return this; //Return the chain
	}

	$.ui.pane = function(jq, options) {

        var self = this;
        
        var leftNav = $(jq[0]),rightNav = $(jq[2]);
        this.contents = $(jq[1]);
        this.container = jq.parents("div.uiLayoutContainer:first");
        
        var leftNavToolbar = $("div.uiLeftNavToolbar", self.container);
        var rightNavToolbar = $("div.uiRightNavToolbar", self.container);        
        var leftBar = leftNav.next()
        if(rightNav[0]) rightBar = rightNav.prev();

        this.options = $.extend({
          leftMin: 150,
          leftMax: 300,
          rightMin: 150,
          rightMax: 300,
          border: leftBar.width(),
          contentsMin: 0
        }, options);
        var o = this.options;
        
        var leftMin = o.leftMin, leftMax = o.leftMax, rightMin = o.rightMin, rightMax = o.rightMax, border = o.border, contentsMin = o.contentsMin;

        leftBar.add(rightBar).draggable({
			axis: "x",
			helper: "clone",
			start: function(e,o) {
				self.start.apply(self, [this,e,o]);
			},
			stop: function(e,o) {
				var pos = parseInt(o.helper.style.left);
				var side = this.ui.navSide;
				var position = (side == "Left" ? pos : self.container.width() - pos - border);
				if(side == "Left") {
					self.leftRight(self.contents, position + border);
					leftNav.width(position + "px");
					$(this).css("left", position + "px");
				} else {
					self.leftRight(self.contents, null, position + border);
					rightNav.width(position + "px");
					$(this).css("right", position + "px")
				}
			
				$(window).resize();
				document.body.style.cursor = "";          
			},
			drag: function(e,o) {
				if(o.position.left < this.minLeft ) return {left: this.minLeft};
				else if(o.position.left > this.maxLeft) return {left: this.maxLeft};
			}
        });



        $(window).resize(function() {
			var contentsLeft = self.contents.position().left;
			var contentsWidth = self.contents.width();
			if(contentsWidth < contentsMin) self.leftRightByWidth(self.contents, contentsMin, contentsLeft);
			
			var contentsRight = contentsLeft + self.contents.width();
			var rightWidth = self.container.width() - contentsRight - border;
			
			if(rightBar[0]) {
				rightBar.css("right", self.container.width() - contentsRight - border + "px");
				try { rightNav.css("width", rightWidth + "px"); } catch(e) {}
			}
			if(leftNavToolbar[0]) leftNavToolbar.css("width", contentsLeft - 10 + "px");
			if(rightNavToolbar[0]) rightNavToolbar.css("width", rightWidth - 10 + "px");
        }).resize();
        
	}
	
	$.extend($.ui.pane.prototype, {
		start: function(el,e,o) {
			
			var side = el.ui.navSide;
			var contentsInfo = {left: (p = this.contents.position()).left, width: (w = this.contents.width()), right: p.left + w};
			if(side == "Left") {
				el.minLeft = Math.min(contentsInfo.left, this.options.leftMin);
				el.maxLeft = Math.min(contentsInfo.right - this.options.contentsMin - this.options.border, this.options.leftMax);
			} else if(side == "Right") {
				el.minLeft = Math.max(contentsInfo.left + this.options.contentsMin, this.container.width() - this.options.rightMax);
				el.maxLeft = Math.max(contentsInfo.right, this.container.width() - this.options.rightMin);
			}
			document.body.style.cursor = "col-resize";
			
		},
		leftRight: function(jq, left, right) {
	        // If IE6
	        if($.browser.msie && $.browser.msie.version < 7) {
	          jq.each(function() {
	            // Only reset left if we actually passed one in
	            if(left) $(this).css("left", left + "px");
	            // If we didn't, get the current left
	            left = left || $(this).position().left;
	            // The width should be the size of the positioning context minus the left, minus the "right" passed in
	            this.style.width = $(this).offsetParent().width() - left - right + "px";
	          });
	        } else {
	          // If not IE6, do it the standards/correct way
	          if(left) jq.css("left", left + "px");
	          if(right) jq.css("right", right + "px");
	        }
    	},
    	leftRightByWidth: function(jq, width, left) {
	        jq.each(function() {
	          // left is optional
	          left = left || $(this).position().left;
	          // right is the positioning context's width minus the left minus the width you want
	          var right = $(this).offsetParent().width() - left - width;
	          $(this).leftRight(left, right);
	        })
		}
	})
	
	
 
    $("div.uiLeftNav, div.uiContents, div.uiContentsDouble, div.uiRightNav").makePanes({leftMin: 200, leftMax: 600});

})
</script>
</head>

<body>

<div class="uiFiveLayoutContainer uiFiveBox">

  <div class="uiNorth uiVertElement">
    <div class="uiInnerContent">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>    
    </div>
  </div>
  
  <div class="uiHorBar uiTopBar">&nbsp;</div>

  <div class="uiLayoutContainer uiMiddleVert" id="uiMiddleVert">
    <div class="uiLeftNavToolbar uiToolbar">&nbsp;</div>
  
    <div class="uiLeftNav uiElement">
      <div class="uiInnerContent">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>    
      </div>
    </div>
  
    <div class="uiVertBar uiLeftBar">&nbsp;</div>

    <div class="uiContents uiElement">
      <div class="uiInnerContent">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>

    <div class="uiVertBar uiRightBar">&nbsp;</div> 
    
    <div class="uiRightNav uiElement">
      <div class="uiInnerContent">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      </div>
    </div>
      <div class="uiRightNavToolbar uiToolbar">&nbsp;</div>    
  </div>
  
  <div class="uiHorBar uiBottomBar">&nbsp;</div>  
  
  <div class="uiSouth uiVertElement">
    <div class="uiInnerContent">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>    
    </div>
  </div>  
  
</div>

</html>
